<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>HTML5 绘图</title>
<style>
	.canvas{border:1px solid #ccc;cursor:crosshair;}
</style>
</head>
<body>
	<input type="button" value="重放" id="btn1"/> 
	<input type="button" value="清空" id="btn2"/>
    <br/>
	<canvas id="cvs" class="canvas"></canvas>
</body>
</html>
<script>
	class Draw {
		constructor(selector, width, height) {
			this.element = document.querySelector(selector)
			this.canvas = this.element.getContext('2d')
			this.element.width = width
			this.element.height = height
			this.timeId = null
			this.animateArr = []
		}
		init() {
			const {canvas:c, element: el} = this
			let isDrag = false

			c.lineWidth = 2
			c.lineJoin = 'round'
			c.shadowColor = '#000'
			c.shadowBlur = 4

			el.onmousedown = () => {
				isDrag = true
				c.beginPath()
			}
			el.onmousemove = (e) => {
				if (isDrag) {
					const x = e.pageX - el.offsetLeft
					const y = e.pageY - el.offsetTop
					c.lineTo(x, y)
					c.stroke()
					this.animateArr.push([x, y])
				}
			}
			el.onmouseup = () => {
				isDrag = false
				this.animateArr.push(-1)
			}
			el.onmouseout = () => {
				el.onmouseup()
			}
		}
		animateGo() {
			const {canvas:c} = this
			this.clear()
			c.beginPath()
			const loop = (animate, i) => {
				if (i < animate.length - 1) {
					const arr = animate[i]
					if (arr === -1) {
						c.beginPath()
					} else {
						c.lineTo(arr[0], arr[1])
						c.stroke()
					}
					i++
					this.timeId = setTimeout(() => {
						loop(animate, i)
					} ,10)
				}
			}
			loop(this.animateArr, 0)
		}
		clear() {
			const {canvas:c} = this
			const {width, height} = this.element
			c.clearRect(0, 0, width, height)
		}
	}
	const g = new Draw('#cvs', 600, 500)
	g.init()
	document.getElementById('btn1').onclick = () => {
		g.animateGo()
	}
	document.getElementById('btn2').onclick = () => {
		g.clear()
		g.animateArr = []
	}
</script>